import React from 'react';
import { Image, Text, TouchableOpacity, View, TextInput, ImageBackground } from 'react-native';
import Colors from "../constants/Colors";
import { unitWidth, width, unitHeight } from "../constants/AdapterUtil";
import { show } from '../constants/Toast';
import TextUtil from '../constants/TextUtil';

//验证码的输入框
export class CodeInput extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            count: 60,
            canGetCode: true,
        }
    }

    componentWillUnmount() {
        clearInterval(this.interval);
    }

    render() {
        return (
            <ImageBackground style={[{
                width: 291 * unitWidth, height: 44 * unitWidth, flexDirection: 'row'
            }, this.props.style]} source={require('../res/bg_input_1.png')} resizeMode='stretch'>
                <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                    {this.props.IconChildren}
                </View>
                <TextInput
                    style={{
                        flex: 3,
                    }}
                    onChangeText={(text) => {
                        this.props.onChangeText ? this.props.onChangeText(TextUtil.getTextInput(text, 1)) : null;
                    }}
                    keyboardType='numeric'
                    maxLength={10}
                    placeholder='请输入验证码'
                    value={this.props.text}
                />
                <TouchableOpacity style={{
                    flex: 2,
                    height: 40 * unitWidth,
                    alignItems: 'center',
                    justifyContent: 'center',
                }} onPress={this.doCountDown.bind(this)}>
                    <Text style={{
                        color: Colors.colorOrange,
                        borderBottomColor: Colors.colorOrange,
                        borderBottomWidth: 0.5
                    }}>{this.state.canGetCode == true ? '获取验证码' : '重新获取(' + this.state.count + ')'}</Text>
                </TouchableOpacity>
            </ImageBackground>
        );
    }

    doCountDown() {
        if (this.props.phone == '') {
            show('请输入手机号');
            return;
        }
        if (this.state.canGetCode) {
            // this.props.onPress ? this.props.onPress() : null;
            if (this.props.onPress) {
                if (this.props.onPress()) {
                    this.interval = setInterval(() => {
                        if (this.state.count > 0) {
                            this.setState(pre => {
                                return {
                                    count: pre.count - 1,
                                    canGetCode: false
                                };
                            })
                        } else {
                            this.setState({
                                count: 60,
                                canGetCode: true
                            })
                            clearInterval(this.interval);
                        }
                    }, 1000);
                }
            }
        }
    }
}

//验证码输入框2
export class CodeInput2 extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            count: 60,
            canGetCode: true,
        }
    }

    componentWillUnmount() {
        clearInterval(this.interval);
    }

    render() {
        return (
            <View style={this.props.style}>
                <View style={{
                    width: width, height: 60 * unitWidth, flexDirection: 'row', paddingHorizontal: 20 * unitWidth, backgroundColor: Colors.white, alignItems: 'center'
                }}>
                    <View style={{ alignItems: 'flex-start', justifyContent: 'flex-start' }}>
                        <Text style={{ color: Colors.black, fontSize: 17 }}>*验证码：</Text>
                    </View>
                    <TextInput
                        style={{
                            flex: 5,
                            fontSize: 17
                        }}
                        onChangeText={(text) => {
                            this.props.onChangeText ? this.props.onChangeText(TextUtil.getTextInput(text, 1)) : null;
                        }}
                        keyboardType='numeric'
                        maxLength={10}
                        placeholder='请输入验证码'
                        value={this.props.text}
                    />
                    <TouchableOpacity style={{
                        flex: 2.5,
                        height: 40 * unitWidth,
                        alignItems: 'center',
                        justifyContent: 'center',
                    }} onPress={this.doCountDown.bind(this)}>
                        <Text style={{
                            color: Colors.colorOrange,
                            borderBottomColor: Colors.colorOrange,
                            borderBottomWidth: 0.5
                        }}>{this.state.canGetCode == true ? '获取验证码' : '重新获取(' + this.state.count + ')'}</Text>
                    </TouchableOpacity>
                </View>
                {this.props.isLast ?
                    null : <View style={{ backgroundColor: Colors.colorEF, width: width, alignSelf: 'center', height: 0.5, marginTop: 10 * unitWidth, position: 'absolute', bottom: 0 }} />
                }
            </View>
        );
    }

    doCountDown() {
        if (this.props.phone == '') {
            show('请输入手机号');
            return;
        }
        if (this.state.canGetCode) {
            // this.props.onPress ? this.props.onPress() : null;
            if (this.props.onPress) {
                if (this.props.onPress()) {
                    this.interval = setInterval(() => {
                        if (this.state.count > 0) {
                            this.setState(pre => {
                                return {
                                    count: pre.count - 1,
                                    canGetCode: false
                                };
                            })
                        } else {
                            this.setState({
                                count: 60,
                                canGetCode: true
                            })
                            clearInterval(this.interval);
                        }
                    }, 1000);
                }
            }
        }
    }
}

//图标的输入框
export class IconInput extends React.Component {

    constructor(props) {
        super(props);
        this.state = {

        }
    }

    componentWillUnmount() {

    }

    render() {
        return (
            <ImageBackground style={[{
                width: 291 * unitWidth, height: 44 * unitWidth, flexDirection: 'row'
            }, this.props.style]} source={require('../res/bg_input_1.png')} resizeMode='stretch'>
                <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                    {this.props.IconChildren}
                </View>
                <TextInput
                    style={{
                        flex: 5,
                    }}
                    onChangeText={(text) => {
                        this.props.onChangeText ? this.props.onChangeText(text) : null;
                    }}
                    keyboardType={this.props.keyboardType}
                    maxLength={this.props.maxLength}
                    secureTextEntry={this.props.secureTextEntry}
                    placeholder={this.props.placeholder}
                    value={this.props.text}
                />
            </ImageBackground>
        );
    }
}

//左右图片输入框
export class IconInput2 extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            value: this.props.text
        }
    }

    componentWillUnmount() {

    }

    onChangeValue(text) {
        this.setState({
            value: text
        })
    }

    render() {
        return (
            <ImageBackground style={[{
                width: 291 * unitWidth, height: 44 * unitWidth, flexDirection: 'row'
            }, this.props.style]} source={require('../res/bg_input_1.png')} resizeMode='stretch'>
                <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                    {this.props.IconChildren}
                </View>
                <TextInput
                    style={{
                        flex: 3,
                    }}
                    onChangeText={(text) => {
                        this.props.onChangeText ? this.props.onChangeText(text) : null;
                    }}
                    keyboardType={this.props.keyboardType}
                    maxLength={this.props.maxLength}
                    editable={this.props.editable}
                    secureTextEntry={this.props.secureTextEntry}
                    placeholder={this.props.placeholder}
                    value={this.state.value}
                />
                <View style={{ flex: 2, alignItems: 'flex-end', justifyContent: 'center', marginRight: 10 * unitWidth }}>
                    {this.props.CodeImage}
                </View>
            </ImageBackground>
        );
    }
}

//左右图片输入框
export class IconInput3 extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            value: this.props.text
        }
    }

    componentWillUnmount() {

    }

    onChangeValue(text) {
        this.setState({
            value: text
        })
    }

    render() {
        return (
            <View style={this.props.style}>
                <View style={{
                    width: width, minHeight: 60 * unitWidth, flexDirection: 'row', paddingHorizontal: 20 * unitWidth, backgroundColor: Colors.white, alignItems: 'center'
                }}>
                    <View style={{ flex: 2, alignItems: 'center', justifyContent: 'center' }}>
                        {this.props.title}
                    </View>
                    <TextInput
                        style={{
                            flex: 2.5,
                            fontSize: 16,
                            textAlign: 'left'
                        }}
                        onChangeText={(text) => {
                            this.props.onChangeText ? this.props.onChangeText(text) : null;
                        }}
                        keyboardType={this.props.keyboardType}
                        maxLength={this.props.maxLength}
                        editable={this.props.editable}
                        secureTextEntry={this.props.secureTextEntry}
                        placeholder={this.props.placeholder}
                        value={this.state.value}
                    />
                    <View style={{ flex: 1.5, alignItems: 'flex-end', justifyContent: 'center', marginRight: 10 * unitWidth }}>
                        {this.props.CodeImage}
                    </View>
                </View>
                {this.props.isLast ?
                    null : <View style={{ backgroundColor: Colors.colorEF, width: width, alignSelf: 'center', height: 0.5, marginTop: 10 * unitWidth, position: 'absolute', bottom: 0 }} />
                }
            </View>
        );
    }
}

//普通输入框
export class MyInput1 extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            value: this.props.value,
        }
    }

    componentWillUnmount() {

    }

    render() {
        return (
            <View style={this.props.style}>
                <View style={{
                    width: width, minHeight: 60 * unitWidth, flexDirection: 'row', paddingHorizontal: 20 * unitWidth, backgroundColor: Colors.white, alignItems: 'center'
                }}>
                    <View style={{ alignItems: 'flex-start', justifyContent: 'flex-start' }}>
                        {this.props.title}
                    </View>
                    <TextInput
                        style={{
                            flex: 1,
                            fontSize: 14,
                            textAlign: 'left'
                        }}
                        onChangeText={(text) => {
                            let newText = TextUtil.getTextInput(text, this.props.filterType)
                            this.setState({
                                value: newText
                            })
                            this.props.onChangeText ? this.props.onChangeText(newText) : null;
                        }}
                        multiline={this.props.multiline}
                        keyboardType={this.props.keyboardType}
                        maxLength={this.props.maxLength}
                        secureTextEntry={this.props.secureTextEntry}
                        placeholder={this.props.placeholder}
                        value={this.state.value}
                        editable={this.props.editable}
                    />
                </View>
                {this.props.isLast ?
                    null : <View style={{ backgroundColor: Colors.colorEF, width: width, alignSelf: 'center', height: 0.5, marginTop: 10 * unitWidth, position: 'absolute', bottom: 0 }} />
                }
            </View>
        );
    }
}

//普通输入框2
export class MyInput2 extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            value: this.props.value,
        }
    }

    componentWillUnmount() {

    }

    render() {
        return (
            <View style={this.props.style}>
                <View style={{
                    width: width, minHeight: 120 * unitWidth, paddingHorizontal: 20 * unitWidth,
                    backgroundColor: Colors.white, alignItems: 'flex-start', paddingVertical: 15 * unitWidth
                }}>
                    <View style={{ alignItems: 'flex-start', justifyContent: 'flex-start' }}>
                        {this.props.title}
                    </View>
                    <TextInput
                        style={{
                            fontSize: 16
                        }}
                        multiline={true}
                        onChangeText={(text) => {
                            let newText = TextUtil.getTextInput(text, this.props.filterType)
                            this.setState({
                                value: newText
                            })
                            this.props.onChangeText ? this.props.onChangeText(newText) : null;
                        }}
                        keyboardType={this.props.keyboardType}
                        maxLength={this.props.maxLength}
                        secureTextEntry={this.props.secureTextEntry}
                        placeholder={this.props.placeholder}
                        value={this.state.value}
                    />
                </View>
                {this.props.isLast ?
                    null : <View style={{ backgroundColor: Colors.colorEF, width: width, alignSelf: 'center', height: 0.5, marginTop: 10 * unitWidth, position: 'absolute', bottom: 0 }} />
                }
            </View>
        );
    }
}

//输入框3
export class MyInput3 extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            value: this.props.text
        }
    }

    componentWillUnmount() {

    }

    onChangeValue(text) {
        this.setState({
            value: text
        })
    }

    render() {
        return (
            <View style={this.props.style}>
                <View style={{
                    width: width, minHeight: 60 * unitWidth, flexDirection: 'row', paddingHorizontal: 20 * unitWidth, backgroundColor: Colors.white, alignItems: 'center'
                }} >
                    <View style={{ alignItems: 'flex-start', justifyContent: 'flex-start' }}>
                        {this.props.title}
                    </View>
                    <TextInput
                        style={{
                            fontSize: 16,
                        }}
                        onChangeText={(text) => {
                            this.props.onChangeText ? this.props.onChangeText(text) : null;
                        }}
                        keyboardType={this.props.keyboardType}
                        maxLength={this.props.maxLength}
                        editable={this.props.editable}
                        secureTextEntry={this.props.secureTextEntry}
                        placeholder={this.props.placeholder}
                        value={this.state.value}
                    />
                    <View style={{ flex: 2, alignItems: 'flex-end', justifyContent: 'center', marginRight: 10 * unitWidth }}>
                        {this.props.CodeImage}
                    </View>
                </View>
                {this.props.isLast ?
                    null : <View style={{ backgroundColor: Colors.colorEF, width: width, alignSelf: 'center', height: 0.5, marginTop: 10 * unitWidth, position: 'absolute', bottom: 0 }} />
                }
            </View>
        );
    }
}